<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body onload="draw()">
    <canvas id="mycanvas" height="150" width="150"></canvas>
    <script>
        // 需求：以四个矩形为背景，在矩形中创建小矩形的渐变效果
        function draw() {
            const canvasId = $("#mycanvas")[0];
            const ctx = canvasId.getContext && canvasId.getContext("2d");
            ctx.fillStyle = 'rgb(255, 221, 0)';
            ctx.fillRect(0, 0, 150, 37.5);
            ctx.fillStyle = 'rgb(102, 204, 0)';
            ctx.fillRect(0, 37.5, 150, 37.5);
            ctx.fillStyle = 'rgb(0, 153, 255)';
            ctx.fillRect(0, 75, 150, 37.5);
            ctx.fillStyle = 'rgb(255, 51, 0)';
            ctx.fillRect(0, 112.5, 150, 37.5);
            // 在矩形框中进行小矩形的颜色透明渐变
            for (let i = 0; i < 10; i++) {
                ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
                for (let j = 0; j < 4; j++) {
                    ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
                }
            }
        }
    </script>
</body>
</html>